<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#container {
			width: 300px;
			height: 300px;
			position: absolute;
		}

		.rect {
			background-color: #ccc;
			width: 50px;
			height: 50px;
			position: absolute;
			left: 0;
			top: 0;
			will-change: all;
		}

		.animate .rect {
			animation: slide1 3.7s ease-in-out infinite;
		}

		@keyframes slide1 {
			25% {
				left: 250px;
				top: 0;
			}

			50% {
				left: 250px;
				top: 250px;
			}

			75% {
				left: 0px;
				top: 250px;
			}
		}

		@keyframes slide {
			25% {
				background-color: #aaa;
				transform: translate(250px, 0px);
			}

			50% {
				transform: translate(250px, 250px);
			}

			75% {
				transform: translate(0px, 250px);
			}
		}
	</style>

</head>

<body>
	<button onclick="toggle();">Toggle bane</button>

	<div id="container">
		<div class="rect"></div>
	</div>
</body>
<script>
	function toggle() {
		let container = document.getElementById('container');
		container.classList.contains('animate') ? container.classList.remove('animate') : container.classList.add('animate');
	}
</script>

</html>